@extends('app')

@section('content')
    <div class="layui-card" style="margin-bottom: 0;">

        @include('layouts.breadcrumb')

        <div class="layui-tab layui-tab-card" lay-filter="docDemoTabBrief" style="margin: 10px">
            <ul class="layui-tab-title" style="padding-bottom: 0px">
                <li class="@if($type==1) layui-this @endif"><a href="?type=1">前台</a></li>
                <li class="@if($type==2) layui-this @endif"><a href="?type=2">后台</a></li>
            </ul>

            <div class="layui-tab-content">
                <form class="layui-form">
                    <blockquote class="layui-elem-quote quoteBox" >
                        <a class="layui-btn layui-btn-sm" onclick="newWindow('添加菜单','/nav/edit?type={{$type??1}}','500','500');">添加菜单</a>
                        <a class="layui-btn layui-btn-sm" id="sort" >保存排序</a>
                    </blockquote>
                </form>
                <div class="layui-tab-item layui-show">
                    <table class="layui-table layui-form " id="model"></table>
                    <div id="tree"></div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="upload">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="openAll()" lay-event="assign">全部展开/隐藏</button>
        </div>
    </script>
@endsection

@section('import')
    <script src="{{asset('asset/lib/extend/Sortable.js')}}"></script>
@endsection

@section('js')
<script>

    layui.config({
        base: '/asset/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        treeTable:'lib/extend/treeTable'
    }).use(['treeTable','form','jquery','element'],function(){

        var $ = layui.$,
            form = layui.form,
            layer = layui.layer,
            element = layui.element,
            treeTable = layui.treeTable;

        $.ajax({
            url: '/nav/index?type={{$type}}',
            type: 'post',
            success:function(data){
                var	re = treeTable.render({
                    elem: '#model',
                    data:data.data,
                    icon_key: 'name',
                    is_checkbox: true,
                    //默认选中
                    checked: {
                        key: 'id',
                    },
                    icon: {
                        open: 'layui-icon layui-icon-down',
                        close: 'layui-icon layui-icon-right',
                        left: 16,
                    },
                    end: function(e){
                        // console.dir(e);
                        form.render();
                    },
                    cols: [
                        {key: 'icon',title: '图标',width: '40px',template:function(item){
                                return '<i class="layui-icon '+item.icon+'"></i>';
                            }
                        },
                        {key: 'name',title: '名称',width: '250px'},
                        {key:'sort', edit:'text',width:'50px', title: '排序'},
                        {key: 'link',title: '链接',width: '200px',template:function(item){if(item.link==null){return '';}else{return item.link;}}},
                        {key: 'id',title: 'ID',width: '100px',align: 'center',},
                        {key: 'pid',title: '上级ID',width: '100px',align: 'center',},
                        {key: 'created_at',title: '创建时间',width: '180px',align: 'center',template:function(item){return dateTime(item.created_at);}},
                        {key: 'updated_at',title: '更新时间',width: '180px',align: 'center',template:function(item){return dateTime(item.updated_at);}},
                        {title: '操作',align: 'center',template: function(item){
                                var html='';
                                var addBtn='<a class="layui-btn layui-btn-xs" lay-filter="add" lay-event="add">添加子菜单</a>';
                                var editBtn='<a class="layui-btn layui-btn-normal layui-btn-xs" lay-filter="edit" lay-event="edit">编辑菜单</a>'
                                var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-filter="del" lay-event="del">删除</a>';
                                return addBtn+editBtn+delBtn;
                            }
                        }
                    ]
                });

                $("tbody").attr("id", 'foo');
                Sortable.create(document.getElementById('foo'),{
                    animation: 150
                });
            }
        });

        //添加子菜单
        treeTable.on('tree(add)',function(data){
            newWindow('添加子菜单','/nav/edit?type={{$type}}&pid='+data.item.id,500,500);
        })

        //修改菜单
        treeTable.on('tree(edit)',function (data) {
            newWindow('编辑菜单','/nav/edit?type={{$type}}&id='+data.item.id,500,500);
        });
        treeTable.on('tree(del)',function (data) {
            del(data)
        });

        function del(data) {
            console.info(data);
            layer.confirm("你确定删除数据吗？如果存在下级导航则一并删除，此操作不能撤销！", {icon: 3, title:'提示'},
                function(index){//确定回调
                    var id = data.item.id;
                    $.ajax({
                        url:'/nav/del',
                        data:{id:id},
                        success:function(data){
                            layer.alert(data.msg,{icon: 1},function () {
                                location.reload('treeTable');
                                parent.layer.closeAll();
                            });
                        }
                    })
                },function (index) {//取消回调
                    layer.close(index);
                }
            );
        }

        $("#sort").click(function(){
            var obj = $('#model').find('tbody tr');
            var data = new Array();
            obj.each(function(index){
                var i = $(this).index();
                var id = Number($(this).attr('data-id'));
                var pid = Number($(this).attr('data-pid'));
                var arr = new Object();
                arr.id = id;

                arr.sort = i;
                data.push(arr);
            })

            $.ajax({
                url:'/nav/sort',
                type:'post',
                dataType:'json',
                data:{'data':JSON.stringify(data)},
                success:function(data){
                    layer.alert(data.msg,{icon: 1},function () {
                        location.reload('treeTable');
                        parent.layer.closeAll();
                    });
                }
            })
        });

    })




</script>
@endsection